<template>
  <el-dialog v-model="dialogVisible" @close="dialogVisible = false">
    <template #header>
      <div v-draggableDialog>布局管理</div>
    </template>
    <template #default>
      <el-tree
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        :data="modelValue"
        draggable
        default-expand-all
        node-key="id"
        :props="myProps"
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ data.labelName }}</span>             
            <span>
              <el-button link type="primary" @click="handleEdit(data)">编辑</el-button>            
            </span>
          </span>
        </template>
      </el-tree>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveFormItem">保存</el-button>
      </span>
    </template>      
  </el-dialog>  
</template>

<script setup>
import { reactive, ref, toRefs,getCurrentInstance,watch,nextTick  } from 'vue';
import { editableFieldArr, transforJson } from './transfer';
const dialogVisible = ref(false)
const props = defineProps({
  modelValue: {
    type: Array,
    default: ()=>[],
  },
});
const emit = defineEmits(['update:modelValue','onSave','onEdit']);
// const data = ref(props.modelValue)
// console.log('%c data','font-size:24px;color:red;',data)
const myProps = {
    label:'labelName'
}
const handleEdit = (data) => {
  emit('onEdit',data)
}
const saveFormItem = ()=>{
    emit('onSave');
    dialogVisible.value = false
}
defineExpose({
    dialogVisible,
})
const handleDragStart = (node, ev) => {
  console.log('drag start', node)
}
const handleDragEnter = (
  draggingNode,
  dropNode,
  ev
) => {
  console.log('tree drag enter: ', dropNode.label)
}
const handleDragLeave = (
  draggingNode,
  dropNode,
  ev
) => {
  console.log('tree drag leave: ', dropNode.label)
}
const handleDragOver = (draggingNode, dropNode, ev) => {
  console.log('tree drag over: ', dropNode.label)
}
const handleDragEnd = (
  draggingNode,
  dropNode,
  dropType,
  ev
) => {
//   console.log('tree drag end: ', dropNode && dropNode.label, dropType)
  console.log('%c draggingNode','font-size:24px;color:red;',draggingNode)
  console.log('%c dropNode','font-size:24px;color:red;',dropNode)
}
const handleDrop = (
  draggingNode,
  dropNode,
  dropType,
  ev
) => {
  console.log('tree drop: ', dropNode.label, dropType)
}
const allowDrop = (draggingNode, dropNode, type) => {
    if (type === 'inner') {
      return false
    }
    if (draggingNode.data.layoutID && dropNode.data.layoutID) {
        return true
    }
    if (!draggingNode.data.layoutID && !dropNode.data.layoutID) {
        return true
    }
    return false
}
const allowDrag = (draggingNode) => {
//   return draggingNode.data.label.indexOf('Level three 3-1-1') === -1
  return true
}
</script>
<style lang="scss" scoped>

</style>
